<template>
  <div class="tradeTipsDialog" v-if="visible">
    <el-dialog :title="title" v-model="visible" :width="px2vw(width)" :close-on-click-modal="false">
      <template #title>
        <div class="flex items-center dialog-title">
          <div
            class="w-[18px] h-[18px] flex justify-center items-center rounded-1/2 iconbox"
            v-if="showIcon"
          >
            <img class="object-cover w-full h-full" :src="WarningIcon" />
          </div>
          <div class="flex items-center justify-center dot" v-if="showDot">
            <div class="w-[5px] h-[5px] rounded-1/2 bg-[#3721FF]"></div>
          </div>
          <div :class="showIcon || showDot ? 'ml-[10px]' : ''">{{ title }}</div>
        </div>
      </template>
      <slot name="content"> </slot>
      <template #footer v-if="isFooter">
        <el-button v-if="showCancel" @click="hide">取消</el-button>
        <el-button color="#3721FF" type="primary" @click="confirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import WarningIcon from '@/assets/mall/trade/order/warning.png'
import { px2vw } from '@/utils'

const props = defineProps({
  isFooter: {
    type: Boolean,
    default: true
  },
  id: {
    type: [String, Number],
    default: ''
  },
  showIcon: {
    type: Boolean,
    default: true
  },
  showDot: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '432px'
  },
  title: {
    type: String,
    default: '确定提示'
  },
  type: {
    type: String,
    default: 'tips'
  },
  showCancel: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['confirm', 'update:needUpdateMode'])

const visible = ref(false)

/**
 * 点击确定按钮
 */
const delId = ref('')
const confirm = () => {

  if (props.type === 'tips') {
    emit('confirm', true)
   // hide()

  } else if (props.type === 'idTips') {
    emit('confirm', true, props.id ? props.id : delId.value)
  //  hide()

  } else {
    emit('confirm')
   // hide()

  }
  hide()
}

const show = (id) => {
  visible.value = true
  delId.value = id
}

const hide = () => {
  visible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog__footer .el-button) {
  width: 88px !important;
  height: 36px !important;
}
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: #3721ff;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
  background: #3721ff;
  border: #3721ff;
}
</style>
